<template>
	<view>
		<view style="padding:0upx 20upx">
		<view class="info-box" v-if="user && user.role == 'User' ">
			<view class="info-box-item">报送: {{ meta.hired_count + meta.not_hired_count }}</view>
			<view class="info-box-item">已录用: {{ meta.hired_count }}</view>
			<view class="info-box-item">未录用: {{ meta.not_hired_count }}</view>
			<view class="info-box-item">积分: {{ meta.hired_integral }}</view>
		</view>
		</view>
		<view class="uni-flex uni-column list">
			<view class="uni-flex list-cell" v-for="(item, index) in news" :key="index">
				<view v-if="item.thumb" class="list-cell-image">
					<image src="http://www.lsol.com.cn/uploadfile/2019/0603/20190603084553139.jpg"></image>
				</view>

				<view class="uni-column list-cell-body" v-if="user.role === 'User'">
					<view class="body-title">
						<view style="font-size:32upx;">
							<navigator :url="`view?id=${item.id}`">
							{{ item.title }}
							</navigator>
						</view>
						<view v-if="!item.report" :data-id="item.id" @click="update">修改</view>
						<view v-if="item.report" style="color:#b7b7b7">锁定</view>
					</view>
					<view class="uni-flex body-footer">
						<view>
							<text v-if="item.audit_status === 7" class="badge badge-success">二审通过</text>
							<text v-if="item.audit_status === 8 " class="badge badge-secondary">二审提交</text>
							<text v-if="item.audit_status === 9" class="badge badge-success">一审通过</text>
							<text v-if="item.audit_status === 10" class="badge badge-danger">一审提交</text>

							<text v-if="!item.report" class="badge badge-danger">未录用</text>
							<text v-if="item.report" class="badge badge-success">已录用</text>
						</view>
						<text>{{ GMTToStr(item.created_at) }}</text>
					</view>
				</view>

				<view class="uni-column list-cell-body" v-if="user.role === 'Head' || user.role === 'Audit' || user.role === 'Leadership'">
					<view class="body-title">
						<view class="body-text" v-if="!item.report" style="font-size:32upx;">
							<navigator :url="`view?id=${item.id}`">
							{{ item.title }}
							</navigator>
						</view>
						<view class="body-text" v-if="item.report" style="font-size:32upx;color:#b7b5b5">
							<navigator :url="`view?id=${item.id}`">
							<s>{{ item.title }}</s>
							</navigator>
						</view>
						<view class="body-operation" v-if="!item.report && user.role === 'Head'" :data-id="item.id" @tap="actionSheetTap_head">操作</view>
						<view class="body-operation" v-if="!item.report && user.role === 'Audit'" :data-id="item.id" @tap="actionSheetTap_audit">操作</view>
						<view class="body-operation" v-if="item.report" style="color:#b7b7b7">已录用</view>
					</view>
					<view class="uni-flex body-footer">
						<view>
							<text v-if="item.audit_status == 10" class="badge badge-danger"> 一审提交</text>
							<text v-if="item.audit_status == 9" class="badge badge-success"> 一审通过</text>
							<text v-if="item.audit_status == 8" class="badge badge-danger"> 二审提交</text>
							<text v-if="item.audit_status == 7" class="badge badge-success"> 二审通过</text>
							<text style="margin-left:10px;">投稿人：{{ item.user.name }}</text>
						</view>
						<text>{{ GMTToStr(item.created_at) }}</text>
					</view>
				</view>

				<view class="uni-column list-cell-body" v-if="user.role === 'Administrator'">
					<view class="body-title">
						<view class="body-text" v-if="!item.report" style="font-size:32upx;">
							<navigator :url="`view?id=${item.id}`">
							{{ item.title }}
							</navigator>
						</view>
						<view class="body-text" v-if="item.report" style="font-size:32upx;color:#b7b5b5">
							<navigator :url="`view?id=${item.id}`">
							<s>{{ item.title }}</s>
							</navigator>
						</view>
						<view class="body-operation" v-if="!item.report" :data-id="item.id" @tap="actionSheetTap_audit">操作</view>
						<view class="body-operation" v-if="item.report" style="color:#b7b7b7">已录用</view>
					</view>
					<view class="uni-flex body-footer">
						<view>
							<text v-if="item.audit_status == 10" class="badge badge-danger"> 一审提交</text>
							<text v-if="item.audit_status == 9" class="badge badge-success"> 一审通过</text>
							<text v-if="item.audit_status == 8" class="badge badge-danger"> 二审提交</text>
							<text v-if="item.audit_status == 7" class="badge badge-success"> 二审通过</text>
							<text style="margin-left:10px;">投稿人：{{ item.user.name }}</text>
						</view>
						<text>{{ GMTToStr(item.created_at) }}</text>
					</view>
				</view>
			</view>
			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		</view>
	</view>
</template>

<script>
	import * as API from 'server/getData'
	import { mapState } from 'vuex'
	import * as types from 'store/mutations_types'

	export default {
		data() {
			return {
				title: 'title',
				page: 0,
				search_page: 0,
				news: [],
				meta: [],
				loadMoreText: "加载中...",
				showLoadMore: false
			}
		},
		onPullDownRefresh () {
			this.initData()
		},
		onReachBottom() {
			this.showLoadMore = true;
			this.initData(false)
		},
		onLoad() {
			this.initData()
		},
		onShow() {
			if (this.is_refresh) {
				this.initData()
				this.$store.commit(types.UPDATE_REFRESH, {'is_refresh': false})
				console.log('123')
			}
		},
		async onNavigationBarSearchInputConfirmed (e) {
			let res = await API.articles.searchArticles({page: this.search_page, text: e.text})
			this.news = res.data.items
		},
		computed: {
			...mapState(['user', 'is_refresh'])
		},
		methods: {
			async initData(pull=true) {
				if (!this.user) {
					return false
				}
				this.page = !pull ? this.page + 1 : 1
				let res = await API.articles.fetchArticles({page: this.page})
				if (res.success === true) {
					if (res.data.items.length === 0) {
						this.loadMoreText = '已经没有了'
					}
					this.news = pull ? res.data.items : this.news.concat(res.data.items)
					this.meta = res.data._meta
				}
				uni.stopPullDownRefresh()
			},
			update(e) {
				uni.navigateTo({url: `update?id=${e.currentTarget.dataset.id}`})
			},
			GMTToStr(time) {
				let date = new Date(time)
				let Str=date.getFullYear() + '-' +
				(date.getMonth() + 1) + '-' +
				date.getDate()
				return Str
			},
			async actionSheetTap_head(e) {
				let a_id = e.target.dataset['id']
				uni.showActionSheet({
					itemList: ['一审通过', '一审不通过'],
					success: async (e) => {
						let audit_status = ''
						if (e.tapIndex === 0) {
							audit_status = 9 
						}
						if (e.tapIndex === 1) {
							audit_status = 10 
						}

						let res = await API.articles.auditArticle(a_id, {'audit_status': audit_status})

						if (!res.success) {
							uni.showModal({
								content: res.message,
								showCancel: false,
							});
							return false
						}

						uni.showToast({ title: '修改成功' })
						this.initData()
						console.log(res)
					}
				})
			},
			async actionSheetTap_audit(e) {
				let a_id = e.target.dataset['id']
				uni.showActionSheet({
					itemList: ['二审通过', '二审退回'],
					success: async (e) => {
						let audit_status = ''
						if (e.tapIndex === 0) {
							audit_status = 7
						}
						if (e.tapIndex === 1) {
							audit_status = 8
						}

						let res = await API.articles.auditArticle(a_id, {'audit_status': audit_status})

						if (!res.success) {
							uni.showModal({
								content: res.message,
								showCancel: false,
							});
							return false
						}

						uni.showToast({ title: '修改成功' })
						this.initData()
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style>
uni-view {
	font-size: 28upx;
}
page {
	height: auto;
	min-height: 100%;
}
.color-red {
	color: red;
}
.list {}
.list-cell{padding:11px 15px;background:#fff;border-bottom:1px solid #eee;}
.list-cell .list-cell-image image{width:150upx; height:120upx; margin-right: 10px;}
.list-cell .list-cell-body{flex:1;justify-content:space-around;font-size:32upx;}
.body-title{
	line-height: 18px;
	margin-bottom: 10px;
	display: flex;
    justify-content: space-between;
}
.body-text{
	flex:1 1 80%;
}
.body-footer{color: #8f8f94;justify-content: space-between;}

.info-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 3em;
	text-align: center;
}
.info-box .info-box-item {
	flex:auto;
	font-size: 32upx;
}
.badge {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	margin-right: 4px;
}
.badge-secondary {
    color: #fff;
    background-color: #6c757d;
}
.badge-danger {
    color: #fff;
    background-color: #FF5722;
}
.badge-success {
    color: #fff;
    background-color: #28a745;
}
.badge-info {
    color: #fff;
    background-color: #17a2b8;
}
.badge-warning {
    color: #212529;
    background-color: #ffc107;
}
</style>
